<template lang="">
  <div class="center">
    <div class="main" style="border: 1px solid #fff;height: auto;background-color: #fff;border-radius: 10px;">
      <div class="title"
        style="text-align: left;margin-left: 30px;margin-top:30px;border-left: 3px solid #fe0100;width: 100px;height: 25px;">
        <h3 style="color:#fe0100 ;font-weight: 500;font-size: 18px;padding-left: 15px;">新建人员</h3>
      </div>
      <div class="bx" style="border: 0px solid #000;width: 550px;margin: 40px 20px;">
        <el-form :model="data" label-width="130px">
          <el-form-item label="用户名">
            <el-input v-model="data.username" placeholder="请输入邮箱"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="data.realname"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="data.age"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="data.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="学历">
            <el-input v-model="data.education"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="毕业院校">
            <el-input v-model="data.college"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="data.industry"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="部门">
            <el-select v-model="data.department" placeholder="请选择部门" clearable
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
              <el-option v-for="(item,index) in dictList" :key="index" :label="item.dictValue" :value="item.dictValue">
              </el-option>
            </el-select>
            <i @click="dialogFormVisible = true" class="el-icon-plus"
              style="position: absolute;top: 15px;left: 320px;color: #0060ff;font-weight: 700;cursor: pointer;"></i>
          </el-form-item>
          <el-form-item label="职位">
            <el-input v-model="data.position"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;">
            </el-input>
          </el-form-item>
          <el-form-item label="入职时间">
            <el-input v-model="data.hiredate" placeholder="yyyy-MM-dd"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="转正时间">
            <el-input v-model="data.positiveTime" placeholder="yyyy-MM-dd"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item v-if="data.staffStatus=='离职'" label="离职时间">
            <el-input v-model="data.departureTime" placeholder="yyyy-MM-dd"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item v-if="data.staffStatus=='在职'">
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="data.identityCard"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="生日">
            <el-input v-model="data.birthday" placeholder="MM-dd"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="data.phone"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="紧急联系人">
            <el-input v-model="data.emergencyContact" placeholder="姓名：电话号码"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="data.staffStatus">
              <el-radio label="在职"></el-radio>
              <el-radio label="离职"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="薪资">
            <el-input v-model="data.salary" type="number"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="data.adress"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="data.password"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 50px;overflow: hidden;"></el-input>
          </el-form-item>
          <el-form-item label="权限">
            <el-checkbox-group v-model="userAuth" style="width: 900px;text-align:left">
              <el-checkbox label="b">员工管理</el-checkbox>
              <el-checkbox label="a">报销审批</el-checkbox>
              <el-checkbox label="d">合同管理</el-checkbox>
              <el-checkbox label="c">客户管理</el-checkbox>
              <el-checkbox label="e">销售员</el-checkbox>
              <el-checkbox label="f">销售管理</el-checkbox>
              <el-checkbox label="g">报销主管</el-checkbox>
              <el-checkbox label="h">财务主管</el-checkbox>
              <el-checkbox label="i">系统管理</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button @click="addStaffy" type="danger" class="button">确定</el-button>
            <el-button @click="cancel" type="danger" class="button">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 添加部门弹框 -->
      <el-dialog :visible.sync="dialogFormVisible">
        <el-form v-model="departmentData">
          <el-form-item>
            <el-input v-model="departmentData.dictValue" autocomplete="off" placeholder="请添加部门"
              style="border:1px solid #b6b6b6;width: 300px;border-radius: 10px;overflow: hidden;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" type="danger" class="button">取 消</el-button>
          <el-button @click="addDict" type="danger" class="button">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogFormVisible: false,
        dataTable: [],
        dictList: [],
        current: 0,
        size: 100,
        dictKey: '',
        data: {
          username: '',
          sex: '',
          hiredate: '',
          department: '',
          position: '',
          adress: '',
          realname: '',
          password: '',
          phone: '',
          company: '',
          email: '',
          age: '',
          staffStatus: '',
          emergencyContact: '',
          birthday: '',
          salary: '',
          departureTime: '',
          identityCard: '',
          userType: '1',
          education: '',
          college: '',
          industry: '',
          positiveTime: ''

        },
        userAuth: [],
        departmentData: {
          dictVar: 'department',
          dictKey: '',
          dictValue: '',
        },
        // data: {
        //   customId:'',
        //   name :'',
        // phone:'',
        // adress:'',
        // otherMessage:''
        //   }
      }
    },
    mounted() {
      this.getDictList()
    },
    methods: {
      cancel() {
        this.$router.push({
          path: '/staff'
        });
      },
      //查询部门
      getDictList() {
        var data = {
          // contractId: this.contractId,
          current: 1,
          size: 100,
          dictVar: 'department'

        }
        this.$API.user.reqDictList(data).then(res => {
          if (res.data.code == 200) {
            this.dictList = res.data.data
          } else {
            this.$message.error("查询失败！");
          }
        })
      },
      //  添加省
      addDict() {
        // 解构出参数 
        var data = this.departmentData;
        // this.departmentData.dictValue = this.departmentData.dictKey
        this.$API.dict.reqAddDict(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功！");
            this.dialogFormVisible = false;
            this.reload();
            this.getDictList();
          } else {
            this.$message.error("添加失败！");
          }
        })
      },
      // 添加员工
      addStaffy() {
        console.log(this.userAuth)
        // 解构出参数
        if (this.username == '') {
          this.$message("请输入用户名")
        } else if (this.password == '') {
          this.$message("请输入密码")
        } else {
          const {
            userType,
            username,
            sex,
            hiredate,
            department,
            position,
            adress,
            realname,
            password,
            phone,
            company,
            email,
            identityCard,
            age,
            staffStatus,
            emergencyContact,
            birthday,
            salary,
            departureTime,
          } = this.data;
          var data = {
            userType: userType,
            username: username,
            sex: sex,
            hiredate: hiredate,
            department: department,
            position: position,
            adress: adress,
            realname: realname,
            password: password,
            phone: phone,
            company: company,
            email: email,
            identityCard: identityCard,
            userAuth: this.userAuth.toString(),
            age: age,
            staffStatus: staffStatus,
            emergencyContact: emergencyContact,
            birthday: birthday,
            salary: salary,
            departureTime: departureTime,
          }
          this.$API.user.reqAddStaffy(data).then(res => {
            if (res.data.code == 200) {
              this.$message.success("添加成功！");
              // this.dataTable = result.data.data
              this.$router.push({
                path: '/staff'
              });
            } else {
              this.$message.error("添加失败！");
            }
          })
        }
      },
    },
  }

</script>
<style scoped>
  @import "../../../style/style.css";

  .bx>>>.el-input__inner {
    width: 250px;
  }

  .bx>>>.el-form-item__content {
    width: 300px !important;
    /* border: 1px solid #000; */
  }

  .bx>>>.el-form-item__label {
    font-size: 16px;
  }

  .bx>>>.el-textarea__inner {
    height: 150px;
  }

  .bx>>>.el-input__suffix {
    left: 250px;
  }

  .bx>>>.el-form-item {
    margin-bottom: 10px;
  }
</style>